import { h, VNode } from 'vue';
import { ElInput } from 'element-plus/es';
import {
  BaseFormItemConfig,
  BaseFormItemConfigInterface
} from '@/util/vnode_create_util/dynamic_form_creator/dynamic_form_item_creator';

/**
 * 普通动态输入框接口
 */
export interface InputFormItemConfigInterface<T> extends BaseFormItemConfigInterface<T>{
}

/**
 * 普通动态输入框实现类
 */
export class InputFormItemConfig<T> extends BaseFormItemConfig<T> implements InputFormItemConfigInterface<T> {
  constructor (data: Omit<InputFormItemConfigInterface<T>, 'createMethod'>) {
    super({ ...data });
  }

  createMethod (config: this, formData: T) {
    console.log(this instanceof BaseFormItemConfig);
    return <ElInput
      v-model:modelValue={formData[config.prop]}
      style={{ width: config.inputWidth }}
      onChange={val => config.onChange && config.onChange(val, formData)}
      disabled={typeof config.disabled !== 'function' ? config.disabled : config.disabled(formData)}
      key={`form${config.key ?? config.prop as string}`}>
    </ElInput>;
  }
}

/**
 * 动态文本域接口
 */
export interface InputAreaFormItemConfigInterface<T> extends BaseFormItemConfigInterface<T>{
  rowNum?: number;
  maxLength?: number;
}

/**
 * 动态文本域实现类
 */
export class InputAreaFormItemConfig<T> extends BaseFormItemConfig<T> {
  public rowNum?: number;
  public maxLength?: number;
  // eslint-disable-next-line no-useless-constructor
  public constructor (data: Exclude<InputAreaFormItemConfigInterface<T>, 'createMethod'>) {
    super(data);
    this.rowNum = data.rowNum;
    this.maxLength = data.maxLength;
  }

  createMethod (config: this, formData: T) {
    // @ts-ignore
    return <ElInput rows={config.rowNum || 2}
                    type={'textarea'}
                    v-model={formData[config.prop]}
                    maxlength={config.maxLength}
                    max={config.maxLength}
                    onChange={(val) => config.onChange && config.onChange(val, formData) }
                    style={{ width: config.inputWidth }}
                    key={`form${config.key ?? config.prop as string}`}
                    showWordLimit={!!config.maxLength}
                    disabled={typeof config.disabled !== 'function' ? config.disabled : config.disabled(formData)}>
    </ElInput>;
  }
}
